<template>
  <el-affix :offset="0" style="box-shadow: 0 3px 3px 0 rgba(0, 0, 0, 0.1);">
    <el-row style="background-color: #f6f6f1">
      <el-col class="hidden-sm-and-down" :span="6">
        <h1
          style="margin-left: 20px; color: #53a8ff; float: right; margin-right: 30px;cursor: pointer"
          @click="returnTo"
        >
          图片搜索
        </h1>
      </el-col>
      <el-col
        :xs="16"
        :sm="12"
        :md="12"
        :lg="12"
        :xl="12"
        style="align-self: center"
      >
        <el-input
          v-model="search_str"
          placeholder="请输入内容"
          :trigger-on-focus="false"
          style="width: 100%; float: left;padding: 17px 10px 18px 10px"
          @keyup.enter="searchPic"
        >
          <template #append>
            <el-button icon="el-icon-search" @click="searchPic"></el-button>
          </template>
        </el-input>
      </el-col>
      <el-col
        :xs="8"
        :sm="12"
        :md="6"
        :lg="6"
        :xl="6"
        style="align-self: center"
      >
        <div style="padding-left: 20px">
          <el-radio v-model="search_type" label="1">普通搜索</el-radio>
          <el-radio v-model="search_type" label="2">关键词搜索</el-radio>
        </div>
      </el-col>
    </el-row>
  </el-affix>
  <router-view></router-view>
  <el-container>
    <el-aside width="10%"></el-aside>
    <el-main
      v-loading="loading"
      v-if="$router.currentRoute.value.name === 'Pic'"
    >
      <el-row>
        <el-col
          :lg="img_length"
          v-for="(item, index) in pics"
          :key="index"
          v-bind="img_length"
          :offset="img_length !== 24 && index % 5 !== 0 ? 1 : 0"
          style="margin-top: 10px"
        >
          <el-card :body-style="{ padding: '5px', height: '400px' }">
            <div style="height: 300px">
              <el-image
                :src="get_pic(item.piclocation)"
                :fit="fit"
                @click="preview(item.piclocation)"
                :preview-src-list="srcList"
              ></el-image>
            </div>
            <div style="padding: 14px;">
              <span>{{ item.picbookname }}</span>
              <div class="bottom">
                <el-button type="text" class="button" @click="toDetail(item)"
                  >查看</el-button
                >
              </div>
            </div>
          </el-card>
        </el-col>
      </el-row>
    </el-main>
    <el-aside width="10%"></el-aside>
  </el-container>
</template>

<script>
/*export default {
  name: "Pic"
}*/
import { request } from "@/network/request";
import { ElMessage } from "element-plus";
import home1 from "../assets/img/home1.jpg";
import home2 from "../assets/img/home2.jpg";
import home3 from "../assets/img/home3.jpg";
//import router from "@/router";

export default {
  //name: "Pic",
  data() {
    return {
      fit: "fill",
      img_length: 4,
      search_str: "",
      search_type: "2",
      curSrc: "",
      pics: [], //存放pic对象
      data: [],
      home_img: [home1, home2, home3],
      //current_page: 1,
      //page_size: 5,
      loading: false,
      timeout: null,
      srcList: []
    };
  },
  methods: {
    preview(item) {
      this.srcList = [];
      for (let i in item) {
        // console.log(i);
        this.srcList.push(item[i]);
      }
    },
    searchPic() {
      // console.log(this.search_str);
      let url = "";
      if (this.search_type === "1") {
        url = "/searchPic/searchWithoutKeywords";
      } else if (this.search_type === "2") {
        url = "/searchPic/searchWithoutKeywords";
      }
      if (this.search_str === "") {
        ElMessage({
          message: "请输入搜索内容！",
          duration: 700,
          type: "warning"
        });
      } else if (url !== "") {
        this.loading = true;
        request({
          url: url,
          method: "post",
          data: {
            searchList: this.search_str.split(/[,\s.;，；。]+/)
          }
        })
          .then(res => {
            // console.log(res);
            if (res.data.code === "200") {
              this.pics = res.data.result;
              this.$router.push({ name: "Pic" });
            } else if (res.data.code === "400") {
              ElMessage({
                message: res.data.code + " " + res.data.msg,
                type: "error",
                duration: 800,
                showClose: true
              });
            }
          })
          // eslint-disable-next-line no-unused-vars
          .catch(err => {
            console.log(err);
            ElMessage.error("请求超时！");
          })
          .finally(() => {
            this.loading = false;
          });
      }
    },
    get_pic(src) {
      // console.log("src:", src);
      return src[0];
    },
    toDetail(pic) {
      this.$router.push({
        name: "PicDetail",
        params: {
          picbook_name: pic.picbookname,
          pic_location: pic.piclocation,
          pic_name: pic.picname
        }
      });
    }
  },
  created() {
    if (window.screen.width >= 1200) {
      this.img_length = 4;
    } else {
      this.img_length = 24;
    }
    this.$notify({
      title: "欢迎回来！",
      message: "🤗🤗",
      position: "bottom-left",
      duration: 1500
    });
    request({
      url: "/searchPic/searchAll",
      method: "post"
    })
      .then(res => {
        console.log(res);
        if (res.data.code === "200") {
          this.pics = res.data.result;
          // console.log(this.pics);
        } else if (res.data.code === "400") {
          ElMessage.error(res.data.msg);
        }
      })
      // eslint-disable-next-line no-unused-vars
      .catch(err => {
        console.log(err);
        ElMessage.error("请求超时！");
      });
  },
  computed: {}
};
//防止页面后退
history.pushState(null, null, document.URL);
window.addEventListener("popstate", function() {
  history.pushState(null, null, document.URL);
});
</script>

<style scoped></style>
